<template>
  <div class="avatar-edit-container">
    <router-link to="/home" class="back-button">
      <img src="@/assets/images/mine/back.png" alt="返回图标" class="return-image" />
    </router-link>
    <h1>修改头像</h1>
    <p>千人千面，展示自己风采</p>
    <div class="avatar-wrapper" @click="openFileInput">
      <img v-if="userAvatar" :src="userAvatar" alt="用户头像" class="user-avatar" />
      <div v-else class="default-avatar"></div>
    </div>
    <input type="file" id="fileInput" ref="fileInputRef" style="display: none" @change="handleFileChange" />
    <button class="album-button" @click="openFileInput">相册选择</button>
    <button class="confirm-button" @click="changeAvatar">确认修改</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';
import { ChangeAvatar } from '@/views/mine/api/index';

const userStore = useUserStore();
const userAvatar = ref(userStore.userInfo.userPic ? userStore.userInfo.userPic : 'src/assets/images/home/catAvatar.png');
const fileInputRef = ref(null);

const openFileInput = () => {
  fileInputRef.value.click();
};

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      userAvatar.value = e.target.result;
    };
    reader.readAsDataURL(file);
    console.log(file);
  }
};

const changeAvatar = async () => {
  const file = fileInputRef.value.files[0];
  if (!file) {
    alert('请先选择头像文件');
    return;
  }

  // 添加文件类型校验
  const allowedTypes = ['image/jpeg', 'image/png','image/jpg','image/gif'];
  if (!allowedTypes.includes(file.type)) {
    alert('仅支持jpg、jepg、png、gif格式');
    return;
  }

  // 添加文件大小校验（示例限制2MB）
  const MAX_SIZE = 10 * 1024 * 1024;
  if (file.size > MAX_SIZE) {
    alert('文件大小不能超过10MB');
    return;
  }

  const formData = new FormData();
  formData.append('file', file);

  try {
    const res = await ChangeAvatar(formData);
    console.log('完整响应：', res); // 打印完整响应

    if (res.data.code === 200) {
      // 在组件中
      userStore.userInfo.userPic = res.data.data + '?t=' + Date.now();
      console.log('修改后的头像URL：', userStore.userInfo.userPic);
      alert('修改成功');
    } else {
      alert(`修改失败：${res.data.message || '未知错误'}`);
    }
  } catch (error) {
    console.error('请求异常：', error.response || error);
    alert(`请求失败：${error.message}`);
  }
};
</script>


<style scoped>
.avatar-edit-container {
  text-align: center;
  padding: 20px;
  position: relative;
  background: linear-gradient(135deg, #8B5CF6, #6366F1); /* 设置渐变背景 */
  color: #fff; /* 设置文字颜色为白色 */
  min-height: 100vh; /* 确保容器高度至少占满整个视口 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff; /* 设置返回按钮文字颜色为白色 */
}

.return-image {
  width: 20px;
  height: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #fff; /* 设置标题文字颜色为白色 */
}

p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8); /* 设置描述文字颜色为半透明白色 */
  margin-bottom: 20px;
}

.avatar-wrapper {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 20px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.5); /* 添加边框 */
}

.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
  border-radius: 50%;
}

.album-button, .confirm-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  color: #fff; /* 设置按钮文字颜色为白色 */
}

.album-button {
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
}

.confirm-button {
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
}
</style>